<template>
    <nly-wrapper side-mini navbar-fixed class="myBaseLayout">
        <div class="left-nav-bar-box">
            <div class="logo-warpper">
                <a href="/dashboard/workplace" v-show="!collapsed">
                    <img style="height:100%;" title="logo" :src="userInfo.goodsLogoUrl?userInfo.goodsLogoUrl:logo" />
                </a>
                <!-- <a href="/dashboard/workplace" v-show="!collapsed"><Logo /></a> -->
                <a href="/dashboard/workplace" v-show="collapsed">
                    <img style="margin-left:17px;border-radius:50%;width:40px;height:40px;margin-top:5px;" title="logo" src="../assets/min-logo.png" />
                </a>
            </div>
            <div class="logo-head">
                <div class="item1">
                    <router-link to="/views/personal/userInfo">
                        <a-avatar class="user-head" :size="64" :src="avatar || userdefault" />
                    </router-link>
                </div>
                <div class="item2">
                    <div>
                        <router-link to="/views/personal/userInfo" :title="realName" class="user-name d-block "> {{realName}} </router-link>
                    </div>
                    <div v-show="!collapsed"><a class="user-logout" @click="BaseLogout"><i class="fa fa-sign-out-alt text-danger"></i> 退出登录</a></div>
                </div>
            </div>
            <!-- 动态加载菜单 -->
            <div class="left-nav-bar">
                <ant-menu :collapsed="collapsed" @backMenuData="showChildren" :menus="this.$store.getters.menus[0] && this.$store.getters.menus[0].children" />
            </div>
        </div>
        <!-- 菜单明细 -->
        <!-- @mouseover="()=>visibleChildren = true" @mouseout="()=>visibleChildren = false" -->
        <!--<div v-show="visibleChildren" class="children-box" id="childrenRef" :style="childBoxStyle">
            <div class="triangle-left" :style="sanjiao"></div>
            <a-list class="three-menus" item-layout="horizontal" :data-source="childData.children">
                <a-list-item class="three-menus-flex" slot="renderItem" key="item.title" slot-scope="item, index">
                    <ul class="chil-ul">
                        <div v-if="item.path" class="chil-title">
                            <router-link :to="item.path">
                                <i class="ant-menu-icon nav-icon " :class="item.meta.icon" /><span>{{item.meta.name || item.name || ""}}</span>
                            </router-link>
                        </div>
                        <div v-else class="chil-title">
                            <a>
                                <i class="ant-menu-icon nav-icon " :class="item.meta.icon" /><span>{{item.meta.name || item.name || ""}}</span>
                            </a>
                        </div>
                        <li class="chil-li" v-for="min in item.children">
                            <div v-if="min.path">
                                <router-link :to="min.path">
                                    <i class="ant-menu-icon nav-icon " :class="min.meta.icon" /><span>{{min.meta.name || min.name || ""}}</span>
                                </router-link>
                            </div>
                            <div v-else>
                                <a>
                                    <i class="ant-menu-icon nav-icon " :class="min.meta.icon" /><span>{{min.meta.name || min.name || ""}}</span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </a-list-item>
            </a-list>
        </div>-->

        <div class="content-style-main" :style="contentStyle">
            <nly-navbar style="left:0px" :variant="navbar.variant" header :border="navbar.border" :size="navbar.size" :dark="navbar.dark">
                <nly-navbar-nav>
                    <nly-nav-item @click="toggleCollapsed">
                        <a-icon v-if="collapsed" style="font-weight:bold;font-size:20px;" type="menu-unfold" />
                        <a-icon v-else style="font-weight:bold;font-size:20px;" type="menu-fold" />
                    </nly-nav-item>
                    <div class="d-none d-sm-inline-block" style="line-height:30px;color:#fff;">{{userInfo.companyName}}</div>
                </nly-navbar-nav>
                <nly-navbar-nav class="ml-auto nav-top-menu ">
                    <nly-nav-item style="margin-right: 14px;" class="margin-right-10" @click="showDrawerMsg">
                        <div class="msg-number-box">
                            <a-icon type="mail" style="font-size:22px;" />
                            <a-badge class="msg-num" v-if="msgNumber > 0" :count="msgNumber" :numberStyle="msgNumber>9?mailStyleMore:mailStyleMin">
                                <a href="#" class="head-example" />
                            </a-badge>
                        </div>
                    </nly-nav-item>
                    <nly-nav-item style="min-width:140px;">
                        <!-- 尊敬的用户： -->
                        <a-dropdown style="color:#FFFFFF">
                            <a class="ant-dropdown-link " style="font-weight: 600;color:#FFFFFF;">
                                <a-icon type="user" style="font-size:22px;" /> {{realName}}{{tokenSiban}}
                            </a>
                            <a-menu slot="overlay">
                                <a-menu-item key="1">
                                    <i class="fa fa-user mr-2 "></i>
                                    <router-link to="/views/personal/userInfo" class="nav-user-center"> 个人中心 </router-link>
                                </a-menu-item>
                                <a-menu-item key="2" @click="BaseLogout">
                                    <i class="fa fa-sign-out-alt text-danger mr-2"></i>退出登录
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                        {{timeFix}}
                    </nly-nav-item>
                </nly-navbar-nav>

            </nly-navbar>
            <!-- 自定义Tab 组件-->
            <nav-tab></nav-tab>
            <router-view />
        </div>
        <nly-overlay v-nly-sidebar-collapse.overlay sidebar />

        <a-drawer wrapClassName="msg-main-wrapper" headerStyle="msg-header-wrapper" :width="400" placement="right" :mask="true" :visible="visibleMsg" :after-visible-change="afterVisibleChange" @close="onClose">
            <template slot="title">
                <div>
                    消息提醒
                    <span @click="msgMore" style="float:right;margin-right:40px;font-size:12px;color:#40a9ff;cursor:pointer;">
                        查看更多
                    </span>
                </div>
            </template>
            <div ref="scrollMsg" class="demo-infinite-container" @scroll="scrollGet($event)">
                <a-list item-layout="vertical" size="large" :data-source="msgList">
                    <a-list-item slot="renderItem" key="item.title" slot-scope="item, index" @click="showMsgDetails(item)">
                        <a-skeleton :loading="loading" :paragraph="{ rows: 1 }" active>
                            <div>
                                <span class="item-type" :class="item.status==0?'item-type-status-no':'item-type-status-yes'">
                                    <span class="red-point" v-if="item.status==0"></span>
                                    {{item.type | msgFunction}}
                                </span>
                                <span class="msg-time">
                                    {{item.createDate}}
                                </span>
                            </div>
                            <div class="margin-top-10" style="cursor:pointer">
                                {{ item.title }}
                            </div>
                        </a-skeleton>
                    </a-list-item>
                    <a-list-item v-if="listBusy" class="list-over">
                        到底了哦
                    </a-list-item>
                </a-list>
            </div>
        </a-drawer>

        <!-- <drag-modal title="消息查看" :visible="visibleDetails" @cancel="cancel" :width="800">
            <div class="msg-modal-box">
                <div class="title">
                    {{msgTitle}}
                </div>
                <div class="content">
                    {{msgContent}}
                    <div @click="jumpUrl" style="color:#40a9ff;cursor:pointer;position:absolute;bottom:0;right:10px;">
                        前往查看 <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                    </div>
                </div>
                <div class="date">
                    {{msgTime}}
                </div>
            </div>
            <template slot="footer">
                <a-button type="primary" @click="cancel">确认</a-button>
            </template>
        </drag-modal> -->
        <msg-modal ref="msgModal" @closeDraws="onClose"></msg-modal>
        <!-- 拨号盘 -->
        <calling-box ref="callingBoxRef"></calling-box>
        <tool-bar ref="xyToolBarRef"></tool-bar>
        <rong-ying-tool-bar ref="rongYingToolBarRef"></rong-ying-tool-bar>
        <!--出入库预警弹窗-->
        <a-modal :visible="inOutWarningVisable" title="预警提示" @cancel="HideInOutWarning" width="1000px">
            <div style="  margin-bottom: 10px;font-size: 16px;font-weight: bold;color: #f05050;">最低库存预警：</div>
            <a-table :scroll="{ x: 500, y: 400}" :columns="inOutWarningColumns" :data-source="inOutWarningData" bordered :pagination="false">

            </a-table>
            <template slot="footer">
                <div>
                    <a-button @click="HideInOutWarning" class="margin-left-10">取消</a-button>
                    <a-button type="primary" @click="submitInOutYesCallBack()">继续出库</a-button>
                </div>
            </template>
        </a-modal>
    </nly-wrapper>
</template>

<script>
import userdefault from "@/assets/user_default.png"
import version from "../../package.json";
import { mapState } from "vuex";
import { NavTab } from "@/components/Tab";
import { AntMenu } from "@/components/AntMenu";
import { timeFix } from "@/utils/util";
import Logo from "@/assets/sibanyunlg.svg";
import msgModal from "@/views/message/components/msgModal";
import CallingBox from '@/components/Crm/callingBox';
import MiddleUtils from '@/utils/middle-utils';
import ToolBar from '@/components/Crm/callToolBar/XYToolBarNew';
import RongYingToolBar from '@/components/Crm/callToolBar/RongYingToolBar';

const bt = () => {
    const obj = new Map();
    var btnType = Object.keys(obj).map((key, i) => {
        var item = obj[key].map((s, index) => {
            return <button key={index}>{obj[key][index]}</button>;
        });
        return (
            <Card title={key} key={i}>
                {" "}
                {item}{" "}
            </Card>
        );
    });
};
let timeoutObj = null;
export default {
    components: {
        NavTab,
        AntMenu,
        Logo,
        msgModal,
        CallingBox,
        ToolBar,
        RongYingToolBar
        //注册：函数式组件
        // MenuTabs: {
        //   functional: true,
        //   render: (h, ctx) => ctx.props.menuTabs
        // }
    },
    data () {
        const inOutWarningColumns = [
            {
                align: "center",
                title: "物料名称",
                dataIndex: "inventoryName",
                width: 120,
            },
            {
                align: "center",
                title: "物料编码",
                dataIndex: "inventoryCode",
                width: 120,
            },
            {
                align: "center",
                title: "规格型号",
                dataIndex: "inventorySpecification",
                width: 120,
            },
            {
                align: "left",
                title: "仓库名称",
                dataIndex: "warehouseName",
                width: 120,
                customRender: (text, record, index) => {
                    if(record.dataType == 2)return "";
                    if(!text)return "";
                    if(!record.warehouseCode)record.warehouseCode = "";
                    return text + "(" + record.warehouseCode +")";
                }
            },
            {
                align: "left",
                title: "货位名称",
                dataIndex: "inventoryLocationName",
                width: 120,
                 customRender: (text, record, index) => {
                    if(record.dataType == 2)return "";
                    if(!text)return "";
                    if(!record.inventoryLocationCode)record.inventoryLocationCode = "";
                    return text + "(" + record.inventoryLocationCode +")";
                }
            },
            {
                align: "center",
                title: "出库数量",
                dataIndex: "baseQuantity",
                width: 80,
            },
            {
                align: "center",
                title: "出库前数量",
                dataIndex: "beforeInventoryQuantity",
                width: 80,
            },
            {
                align: "center",
                title: "出库后数量",
                dataIndex: "afterInventoryQuantity",
                width: 80,
            },
            {
                align: "center",
                title: "最低库存",
                dataIndex: "minStorage",
                width: 80,
            },
        ];
        return {
            inOutWarningColumns,
            collapsed: false,
            contentStyle: '',
            version: version.version,
            userdefault,
            navbar: {
                border: true,
                variant: "blue",
                size: null,
                sizeSm: false,
                dark: true,
                variantOption: [
                    "primary", "secondary", "success", "info", "warning", "danger", "lightblue", "navy", "olive", "lime", "fuchsia", "maroon", "blue", "indigo", "purple", "pink", "red", "bg-red", "orange", "yellow", "green", "teal", "cyan", "white", "gray", "graydark"
                ]
            },
            sidebar: {
                sidebarShape: {
                    flat: false,
                    pil: false,
                    compact: false,
                    legacy: false,
                    childIndent: false
                },
                brand: {
                    variant: "light",
                    variantOption: ["primary", "secondary", "success", "info", "warning", "danger", "lightblue", "light", "dark", "navy", "olive", "lime", "fuchsia", "maroon", "blue", "indigo", "purple", "pink", "red", "bg-red", "orange", "yellow", "green", "teal", "cyan", "white", "gray", "graydark"]
                },
                hover: true,
                variant: "darkPink",
                darkVariantOption: [{ a: "darkPrimary", b: "primary" }, { a: "darkWarning", b: "warning" }, { a: "darkInfo", b: "info" }, { a: "darkDanger", b: "danger" }, { a: "darkSuccess", b: "success" }, { a: "darkIndigo", b: "indigo" }, { a: "darkLightblue", b: "lightblue" }, { a: "darkNavy", b: "navy" }, { a: "darkPurple", b: "purple" }, { a: "darkFuchsia", b: "fuchsia" }, { a: "darkPink", b: "pink" }, { a: "darkMaroon", b: "maroon" }, { a: "darkOrange", b: "orange" }, { a: "darkLime", b: "lime" }, { a: "darkTeal", b: "teal" }, { a: "darkOlive", b: "olive" }],
                lightVariantOption: [{ a: "lightPrimary", b: "primary" }, { a: "lightWarning", b: "warning" }, { a: "lightInfo", b: "info" }, { a: "lightDanger", b: "danger" }, { a: "lightSuccess", b: "success" }, { a: "lightIndigo", b: "indigo" }, { a: "lightLightblue", b: "lightblue" }, { a: "lightNavy", b: "navy" }, { a: "lightPurple", b: "purple" }, { a: "lightFuchsia", b: "fuchsia" }, { a: "lightPink", b: "pink" }, { a: "lightMaroon", b: "maroon" }, { a: "lightOrange", b: "orange" }, { a: "lightLime", b: "lime" }, { a: "lightTeal", b: "teal" }, { a: "lightOlive", b: "olive" }]
            },
            body: {
                sizeSm: false
            },
            controlSidebar: {
                size: false,
                sizeSm: null
            },
            footer: {
                size: false,
                sizeSm: null
            },
            timeFix: timeFix(),
            mailStyleMore: { position: 'absolute', top: '-18px', right: '-16px' },
            mailStyleMin: { position: 'absolute', top: '-18px', right: '-8px' },
            visibleMsg: false,//消息窗口
            loading: true,
            msgType: 0, //消息类型 (默认所有) 0: 系统1客户2: 采购3: 销售4: 库存5: 生产6: 财务

            listBusy: false,
            listLoading: false,
            websocket: null,
            lockReconnect: false,//避免重复连接
            // token: Vue.ls.get("Access-Token").toString().replace("Bearer ", ""),
            timeout: 60000,

            serverTimeoutObj: null,
            tt: null,
            inOutWarningVisable: false,             //库存预警弹窗（校验最低库存）
            inOutWarningData: [],                   //库存预警数据
            inOutWarningCallBack: null,             //库存预警回调方法    


            visibleChildren: false,
            childBoxStyle: {},//子菜单悬浮样式
            sanjiao: {},
            childData: {},//子菜单数据
        };
    },
    created () {
        this.$store.dispatch("ListCallSettings");   //获取外呼设置
        this.$store.dispatch("ListVoicePage");      //获取音频列表
        this.$store.dispatch("actionsGetNumber");
        // if (this.msgReceive) {
        //     setInterval(() => {
        //         //登录成功过后获取消息数量
        //         this.$store.dispatch("actionsGetNumber");
        //     }, 5000);
        //     this.$store.commit('MSG_RECEIVE', false);
        // }

        if ('WebSocket' in window) {
             this.createWebSocket();
        } else {
            this.$message.warning('你的浏览器不支持websocket');
        }
        MiddleUtils.$on('OpenCallingBox', (callParams, data) => {
            this.OpenCallingBox(callParams, data);
        });
        MiddleUtils.$on('OpenInOutWarning', (data, callBackFun) => {
            this.OpenInOutWarning(data, callBackFun);
        });
        MiddleUtils.$on('HideInOutWarning', () => {
            this.HideInOutWarning();
        });
        MiddleUtils.$on('backMenuData', (data) => {
            this.showChildren(data);
        });
        MiddleUtils.$on('menuMouserout', () => {
            this.menuMouserout();
        });
    },
    computed: {
        navbarSizeSm () {
            return this.navbar.sizeSm;
        },
        bodySizeSm () {
            return this.body.sizeSm;
        },
        controlSidebarSizeSm () {
            return this.controlSidebar.size ? "sm" : null;
        },
        footerSizeSm () {
            return this.footer.size ? "sm" : null;
        },
        // currentPath(){
        //    return [this.$route.path];
        // },
        // currentOpenKeys(){
        //     return [...this.openKeys];
        // },
        ...mapState({
            realName: state => state.user.name,
            welcome: state => state.user.welcome,
            avatar: state => state.user.avatar,
            // token: state => state.user.token,
            userInfo: state => state.user.info,
            logo: state => state.app.logo,
            msgNumber: state => state.msg.msgNumber,
            msgList: state => state.msg.msgList,
            msgListAll: state => state.msg.msgListAll,
            msgReceive: state => state.msg.msgReceive,
            settings: state => state.callingBox.settings,                       //外呼设置 
        })
    },
    methods: {
        showChildren (data) {
            //console.log('dddd:', data)
            data.data.title = data.data.name;

            let height = 0;
            if (data.data.children) {
                data.data.children.forEach((min, index) => {
                    min.title = min.name;
                    height += 32;
                });
            }
            this.childData = data.data;
            //console.log(this.childData)
            if (this.childData.children) {
                this.visibleChildren = true;
            } else {
                this.visibleChildren = false;
                return;
            }

            this.sanjiao = {
                "top": data.position.top + 'px'
            }


            this.$nextTick(() => {
                //console.log('窗口高度：', document.body.offsetHeight, document.body.scrollHeight, document.body.clientHeight);
                let bodyHeight = document.body.clientHeight;

                let box = document.getElementById('childrenRef');
                //console.log('距离顶部距离:', data.position.top);
                //console.log('div盒子高度:', box.clientHeight);
                //console.log('子菜单个数：', this.childData.children.length)
                if (this.childData.children.length <= 5) {
                    this.childBoxStyle.width = 195 * this.childData.children.length + 22 + 'px'
                }

                if ((data.position.top + box.clientHeight) >= bodyHeight) {
                    this.childBoxStyle.top = bodyHeight - box.clientHeight + 'px'
                } else {
                    this.childBoxStyle.top = data.position.top + 'px'
                }
            })
        },
        menuMouserout () {
            setTimeout(() => {
                this.visibleChildren = false;
            }, 500)
        },
        OpenCallingBox (callParams, data) {
            let { callWay } = this.settings;
            //console.log("callWay", callWay);
            switch (callWay) {
                case "box": this.$refs.callingBoxRef.openCallingBox(callParams, data); break;
                case "line": this.$refs.xyToolBarRef.openCallingBox(callParams, data); break;
                case "callBack": this.$refs.rongYingToolBarRef.openCallingBox(callParams, data); break;
                default: this.$refs.xyToolBarRef.openCallingBox(callParams, data); break;
            }
        },
        createWebSocket () {
            //console.log("WS------------------创建websocket-------------------------------:", this.userInfo.id,Vue.ls.get("Access-Token").toString().replace("Bearer ", ""));
            // 创建websocket
            this.websocket = new WebSocket(this.$Global.WebSocketUrl + '/webSocket/' + this.userInfo.id, [Vue.ls.get("Access-Token").toString().replace("Bearer ", "")]);
            this.initWebSocket()
        },
        initWebSocket () {
            // 连接错误
            this.websocket.onerror = this.setErrorMessage

            // 连接成功
            this.websocket.onopen = this.setOnopenMessage

            // 收到消息的回调
            this.websocket.onmessage = this.setOnmessageMessage

            // 连接关闭的回调
            this.websocket.onclose = this.setOncloseMessage

            // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = this.onbeforeunload
        },
        setErrorMessage () {
            //console.log('WebSocket连接发生错误   状态码：', this.websocket, this.websocket.readyState);
            // this.$store.dispatch("actionsGetNumber");
            this.reconnect();
        },
        setOnopenMessage (e) {
            //console.log('WebSocket连接成功    状态码：', e, this.websocket, this.websocket.readyState)
            //心跳检测重置
            this.heartCheck();
        },
        setOnmessageMessage (event) {
            //console.log("接收服务器推送消息", event);
            let  eventData  = event.data;
            eventData =  JSON.parse(eventData);
            let {businessType,data} = eventData;
            switch(businessType){
                case "NotReadMsg":this.$store.commit('MSG_NUMBER', data);break;
                case "RYCallState": 
                    this.$refs.rongYingToolBarRef.listenerState(data);
                    break;
            }
            // 根据服务器推送的消息做自己的业务处理
            this.heartCheck();
        },
        setOncloseMessage () {
            //console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
            this.reconnect();
        },
        onbeforeunload () {
            this.closeWebSocket()
        },
        closeWebSocket () {
            this.websocket.close()
        },
        reconnect () {
            let token = Vue.ls.get("Access-Token");
            //console.log("---------------------------------------------WS 重连时判断token是否有值-------", token)
            if (!token) {
                clearTimeout(this.tt);
                return;
            };
            //重连webSocket
            if (this.lockReconnect) {
                return;
            };

            this.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            this.tt && clearTimeout(this.tt);
            let _this = this;
            this.tt = setTimeout(function () {
                _this.createWebSocket();
                _this.lockReconnect = false;
            }, 4000);
        },
        //心跳检测
        heartCheck () {
            let token = Vue.ls.get("Access-Token");
            //console.log('WS------------开始心跳-----------------当前Token：', this.timeout, token);
            let userId = this.userInfo.id;
            let _this = this;
            timeoutObj && clearTimeout(timeoutObj);
            timeoutObj = setInterval(function () {
                //console.log('这里发送一个心跳，后端收到后，返回一个心跳消息');
                _this.websocket.send(userId + "_" + token);
            }, _this.timeout)
        },
        msgMore () {
            this.$router.push({ path: '/views/message/list' });
        },
        scrollGet (e) {
            let dom = this.$refs.scrollMsg;
            let boxHeight = dom.clientHeight;//容器高度
            let scrollTop = dom.scrollTop;//滚动条距离顶部的相对距离
            let scrollHeight = dom.scrollHeight;//绝对高度
            // console.log('页面顶部距离', boxHeight, scrollTop, scrollHeight, this.visibleMsg)
            if (this.visibleMsg) {
                if (scrollTop + boxHeight >= scrollHeight) {

                    //console.log('列表数据长度：', this.msgList.length, this.msgListAll.total)
                    if (this.msgList.length == this.msgListAll.total) {
                        // this.$message.warning('已经加载完全部数据了');
                        this.listBusy = true;
                        this.listLoading = false;
                        return;
                    }
                    //到底部了
                    this.listLoading = true;
                    this.$store.dispatch('actionsGetList', { current: this.msgListAll.current + 1, size: this.msgListAll.size }).then(res => {
                        if (res) {
                            this.listLoading = false;
                        }
                    }).catch((error) => {
                        this.$message.warning('加载失败');
                        this.listLoading = false;
                    });
                }
            }
        },
        showMsgDetails (item) {
            //展示消息详情
            this.msgList.map(res => {
                if (res.id == item.id) {
                    res.status = 1;
                }
            })
            this.$refs.msgModal.showMsgDetails(item);
        },
        showDrawerMsg () {
            if (!this.visibleMsg) {
                this.$store.dispatch('actionsGetList');
            } else {
                return;
            }
            this.visibleMsg = true;
            setTimeout(() => {
                this.loading = false;
            }, 400)
        },
        onClose () {
            this.visibleMsg = false;
            this.loading = true;
            this.$store.commit('MSG_LIST_ALL', {});
            this.$store.commit('MSG_LIST', []);
        },
        //获取
        getRootSubmenuKeys (tree) {
            return (
                tree &&
                tree.map(element => {
                    return "sub" + element.id;
                })
            );
        },
        changeNavbarVariant (variant) {
            this.navbar.variant = variant;
        },
        changeSidebarVariant (variant) {
            this.sidebar.variant = variant;
        },
        changeSidebarBrandVariant (variant) {
            this.sidebar.brand.variant = variant;
        },
        //登出
        BaseLogout () {
            let _this = this;
            this.$confirm({
                title: "提示",
                content: (
                    <span>
                        是否退出登录?
                    </span>
                ),
                onOk () {
                    _this.$store.dispatch("Logout").then(() => {
                        window.location.reload();
                    });
                },
                onCancel () { },
            });
        },
        //路由跳转
        goPage (url) {
            // console.log("item",item, "key",key, "keyPath",keyPath)
            this.$router.push({ path: url });
        },
        // 动态加载菜单
        getMenus (menus) {
            const html = menus.map(tree => {
                if (tree.children) {
                    // console.log("父节点：",tree.name ,tree.id,tree.parentId)
                    const childrenHtml = this.getMenus(tree.children);
                    return (
                        <nly-sidebar-nav-tree
                            target={"menu_parent_" + tree.id}
                            text={tree.meta.title || ""}
                            icon={tree.meta.icon || ""}
                            menu-class="pppp"
                        // visible
                        >
                            {childrenHtml}
                        </nly-sidebar-nav-tree>
                    );
                } else {
                    //  console.log("子节点：",tree.name,tree.id,tree.parentId)
                    return (
                        <nly-sidebar-nav-item
                            visible
                            // onClick={()=>this.addTab(tree)}
                            to={tree.path}
                            target={tree.meta.target || ""}
                            link-class="xxx zzz"
                            class="sss"
                            icon={tree.meta.icon || ""}
                            exact={this.$route.path == tree.path}
                        >
                            {tree.meta.title || ""}
                        </nly-sidebar-nav-item>
                    );
                }
            });
            return html;
        },
        getAntRootMenus (menus) {
            //   return <a-menu
            //           mode="inline"
            //           >
            //   <a-menu-item>菜单项</a-menu-item>
            //   <a-sub-menu >
            //     <span slot="title"><i class="nav-icon fas fa-copy" /><span>123123123</span></span>
            //     <a-menu-item >
            //     <span ><i class="nav-icon fas fa-copy" /><span>cc</span></span>
            //     </a-menu-item>
            //   </a-sub-menu>
            // </a-menu>;

            let menu1 = this.getMenus(menus);
            let html = this.getAntMenus(menus);
            let menuHtml = (
                <div>
                    {menu1}
                    <a-menu
                        mode="inline"
                        theme="dark"
                        //  default-selected-keys={['9']}
                        //  default-open-keys={this.openKeys || []}
                        open-keys={this.currentOpenKeys}
                        style="width: 100%"
                        onOpenChange={openKeys => this.onOpenChange(openKeys)}
                        //  selected-keys={this.currentPath}
                        inline-collapsed={false}
                        inlineIndent={13}
                    >
                        {html}
                    </a-menu>
                </div>
            );
            //console.log("menuHtml", menuHtml);
            return menuHtml;
        },
        //动态获取 ant menu
        getAntMenus (tree) {
            const html = tree.map(node => {
                node.title = node.name;
                if (node.children) {
                    const childrenHtml = this.getAntMenus(node.children);
                    // console.log("父节点：",node.name ,node.id,node.parentId,"childrenHtml",childrenHtml)
                    return (
                        <a-sub-menu key={"sub" + node.id}>
                            <span slot="title">
                                <i class={"ant-menu-icon nav-icon " + node.meta.icon || ""} />
                                <span>{node.name || ""}</span>
                            </span>
                            {childrenHtml}
                        </a-sub-menu>
                    );
                } else {
                    // console.log("子节点：",node,node.id,node.parentId)
                    return (
                        <a-menu-item
                            key={"item" + node.id}
                            onClick={(item, key, keyPath) => this.goPage("" + node.path)}
                        >
                            <span>
                                <i class={"ant-menu-icon nav-icon " + node.meta.icon || ""} />
                                <span>{node.name || ""}</span>
                            </span>
                        </a-menu-item>
                    );
                }
            });
            return html;
        },
        onOpenChange (openKeys) {
            //console.log("onOpenChange_openKeys", openKeys, this.rootSubmenuKeys);
            const latestOpenKey = openKeys.find(
                key => this.openKeys.indexOf(key) === -1
            );
            //console.log("latestOpenKey", latestOpenKey);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.openKeys = openKeys;
            } else {
                this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
            //console.log("this.openKeys", this.openKeys);
        },

        //添加 tab
        addTab (menu) {
            // console.log("BasicLayout_addTab....")
            this.$store.commit("SET_TAB_MAP", menu);
        },

        toggleCollapsed () {
            this.collapsed = !this.collapsed;
            if (this.collapsed) {
                this.contentStyle = "margin-left:80px !important;"
                document.getElementsByClassName('main-header')[0].style.marginLeft = "80px";
                document.getElementsByClassName('nav-tab')[0].style.marginLeft = "80px";
                document.getElementsByClassName('left-nav-bar-box')[0].style.width = "80px";
            } else {
                this.contentStyle = "margin-left:250px !important;"
                document.getElementsByClassName('main-header')[0].style.marginLeft = "250px";
                document.getElementsByClassName('nav-tab')[0].style.marginLeft = "250px";
                document.getElementsByClassName('left-nav-bar-box')[0].style.width = "250px";

            }
        },
        OpenInOutWarning (data, callBackFun) {
            //console.log("OpenInOutWarning", data);
            this.inOutWarningVisable = true;
            this.inOutWarningData = data;
            this.inOutWarningCallBack = callBackFun;
        },
        HideInOutWarning () {
            this.inOutWarningVisable = false;
        },
        submitInOutYesCallBack () {
            if (this.inOutWarningCallBack) {
                this.inOutWarningCallBack();
            }
        },
    },

    watch: {
        bodySizeSm: function (newval, oldval) {
            if (newval !== oldval) {
                if (newval) {
                    const bodyClass = document.body.className;
                    if (bodyClass.indexOf("text-sm") == -1) {
                        document.body.classList.add("text-sm");
                    }
                } else {
                    document.body.classList.remove("text-sm");
                }
            }
        },
        navbarSizeSm: function () {
            this.navbar.size = this.navbar.sizeSm ? "sm" : null;
        },
        $route: {//监听路由变化
            handler (nv, ov) {
                //离开路由关闭 右侧抽屉
                this.visibleMsg = false;
                this.$store.commit('MSG_LIST_ALL', {});
                this.$store.commit('MSG_LIST', []);
            },
            deep: true
        },
    },
    filters: {
        msgFunction (key) {
            //类型(默认所有) 0:系统1客户2:采购3:销售4:库存5:生产6:财务
            let text = '系统消息'
            switch (key) {
                case 0:
                    text = '系统消息';
                    break;
                case 1:
                    text = '客户消息';
                    break;
                case 2:
                    text = '采购消息';
                    break;
                case 3:
                    text = '销售消息';
                    break;
                case 4:
                    text = '库存消息';
                    break;
                case 5:
                    text = '生产消息';
                    break;
                case 6:
                    text = '财务消息';
                    break;
                default:
                    break;
            }
            return text;
        }
    }
};
</script>
<style lang="less" >
    @import '../assets/antDesignVueStyle.less';
    .content-header {
        padding: 0 0.5rem !important;
    }
    .navbar-blue {
        background-color: #343a40 !important;
    }

    .brand-link {
        padding: 0 !important;
        .brand-image {
            margin-left: 3.8rem !important;
            max-height: 3.75rem !important;
        }
    }
    .user-panel img {
        width: 5rem !important;
        height: 100% !important;
    }
    .user-name {
        margin-bottom: 1rem;
    }
    .user-logout {
        font-weight: normal !important;
        font-size: 0.8 rem !important;
        i {
            font-size: 1 rem !important;
        }
    }

    //布局 样式
    .wrapper {
        overflow: hidden;
    }
    :not(.layout-fixed) .main-sidebar {
        height: 100vh !important;
    }
    .main-sidebar {
        position: fixed !important;
        box-shadow: unset !important;
    }
    .layout-navbar-fixed .wrapper .brand-link {
        position: relative !important;
    }

    //content 内部高度自适应
    .content-wrapper {
        // height: calc(100vh - 3.5rem - 22px);
        height: calc(100vh - 3.5rem - 2px);
        display: flex;
        flex-direction: column;
        margin-left: 0px !important;
        .content,
        .ant-table-wrapper,
        .ant-spin-nested-loading,
        .ant-spin-container,
        .ant-table,
        .ant-table-content,
        .ant-table-scroll,
        .ant-table-body {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .ant-table-pagination {
            text-align: left;
        }
        //布局内容 背景颜色
        background: white !important  ;
    }
    //table内部高度 填充剩余高度，且超出高度滚动
    section.content .ant-table-scroll > .ant-table-body {
        flex-grow: 1;
        overflow-y: auto;
        overflow-x: hidden;
        height: 0;
        max-height: none !important;
    }
    //td 不换行
    .ant-table-tbody > tr > td,
    .ant-table-header th {
        white-space: nowrap;
        overflow: hidden;
        color: #333;
        // padding: 0px !important;
        // padding-left: 0.3rem !important;
    }
    .ant-table-wrapper .ant-table-placeholder {
        // position: absolute !important;
        // top: 3.5rem;
        // width: calc(100% - 1.2rem - 1px);
        width: 100%;
    }

    //footer

    //分割线
    .tabpanel_tab_spacer {
        border-bottom: 1px solid #e5e5e5;
        width: 120%;
        margin: 0.5rem 0;
    }

    .form-inline > label {
        justify-content: right !important;
    }
    .ant-radio-group > label {
        justify-content: left !important;
        display: inline-block !important;
    }
    .ant-checkbox-group > label {
        justify-content: left !important;
        display: inline-block !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .form-inline {
        .myRightClass {
            flex: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: auto !important;
        }
    }
    // Table 样式调整
    .ant-table-bordered .ant-table-body > table,
    .ant-table-bordered .ant-table-fixed-left table,
    .ant-table-bordered .ant-table-fixed-right table,
    .ant-table-bordered .ant-table-header > table {
        border: 1px solid #cacaca;
        border-right: 0;
        border-bottom: 0;
    }
    .ant-table-bordered.ant-table-fixed-header
        .ant-table-scroll
        .ant-table-header.ant-table-hide-scrollbar
        .ant-table-thead
        > tr:only-child
        > th:last-child {
        border-right-color: #cacaca;
    }
    .ant-table-thead > tr > th {
        // background-color: #e3e3e3 !important;
        border-bottom: 1px solid #cacaca;
    }
    .ant-table-tbody {
        .goToDetail:hover,
        .goToDetail:active,
        .goToDetail:focus {
            color: #5587a5 !important;
        }
    }
    // .ant-table-scroll .ant-table-body{
    //   overflow-x: hidden !important;
    // }

    .ant-table-wrapper thead tr,
    .ant-table-wrapper tbody tr {
        height: 30px;
    }
    .ant-table-thead > tr > th.ant-table-column-sort {
        background: #fff;
    }
    .ant-table-bordered .ant-table-tbody > tr > td,
    .ant-table-bordered .ant-table-thead > tr > th {
        border-right: 1px solid #cacaca;
    }
    .ant-table-bordered .ant-table-thead > tr:not(:last-child) > th {
        border-bottom: 1px solid #cacaca;
    }
    .ant-table-bordered.ant-table-empty .ant-table-placeholder {
        border-left: 1px solid #cacaca;
        border-right: 1px solid #cacaca;
    }

    .ant-table-placeholder {
        border: 1px solid #cacaca;
        position: absolute !important;
        top: 32px;
    }
    .ant-table-tbody > tr > td {
        border-bottom: 1px solid #cacaca;
        padding: 0px 2px !important;
        text-align: left;
    }
    //设置间隔背景色
    // .ant-table-tbody > tr:nth-child(2n) {
    //   background-color: #f1f1f1;
    // }
    //table 头部可伸缩样式
    .resize-table-th {
        position: relative;
        .table-draggable-handle {
            position: absolute;
            top: 0;
            height: 100% !important;
            bottom: 0;
            left: auto !important;
            right: -5px;
            cursor: col-resize;
            touch-action: none;
            transform: none !important;
        }
    }
    //table 中的分页 的input-numbe样式
    .ant-pagination-total-text {
        .ant-input-number {
            width: 3.8rem !important;
            .ant-input-number-handler-wrap {
                width: 0px !important;
            }
        }
    }
    //
    .ant-input[disabled] {
        color: rgb(73, 80, 87) !important;
    }

    .ant-radio-group,
    .ant-checkbox-wrapper {
        font-size: 1rem !important;
    }
    .main-sidebar {
        font-size: calc(1rem + 1px);
    }

    //菜单 样式
    .ant-menu-dark {
        background-color: #343a40 !important;
    }
    .ant-menu-dark .ant-menu-inline.ant-menu-sub {
        background-color: #343a40 !important;
        box-shadow: none !important;
    }
    .ant-menu-submenu-title {
        // line-height: auto !important;
        // height: auto !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        padding-top: 6px !important;
        padding-right: 12px !important;
        padding-bottom: 6px !important;
    }

    .ant-menu-sub.ant-menu-inline > .ant-menu-item {
        line-height: 30px !important;
        height: 30px !important;
    }
    .ant-menu-item {
        line-height: 30 !important;
        height: 30 !important;
        // margin: 4px 0px !important;
        // padding-top: 6px !important;
        // padding-right: 12px !important;
        // padding-bottom: 6px !important;
        a {
            display: block !important;
            // padding-top: 6px !important;
            // padding-right: 12px !important;
            // padding-bottom: 6px !important;
        }
    }
    .ant-menu-item:hover {
        background-color: #afafaf !important;
        a {
            color: #343a40 !important;
        }
    }
    .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
        line-height: 30px !important;
    }

    .ant-menu.ant-menu-dark .ant-menu-item-selected,
    .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
        background-color: rgba(255, 255, 255, 0.9) !important;
        a {
            color: #343a40 !important;
        }
    }
    //table 样式
    .ant-table .ant-table-row-indent + .ant-table-row-expand-icon {
        font-size: 1.45rem;
    }
    //控制AntMenu 菜单标题图标
    .ant-menu-icon {
        margin-right: 0.5rem;
    }
    .sidebar-mini.sidebar-collapse .content-wrapper .content-wrapper {
        margin-left: 0 !important;
    }
    .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar span {
        display: inline-block;
        margin-left: 0;
        opacity: 1;
        visibility: visible;
    }
    .sidebar-mini.sidebar-collapse .nav-sidebar span {
        margin-left: -10px;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
        transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
    }
    .ant-menu span {
        -webkit-transition: margin-left 0.3s linear, opacity 0.3s ease,
            visibility 0.3s ease;
        transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
    }
    .ant-menu.ant-menu-dark .ant-menu-item-selected

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    //列表页 自定义CSS
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    .list-header {
        border-bottom: 1px solid #ced4da;
        font-size: 1.1rem !important;
        padding: 0 !important;
        display: flex;
    }
    .list-header .icon i {
        color: #1890ff;
    }
    .list-header span {
        margin-left: 0.25rem;
    }

    //ant 气泡卡片样式
    .ant-popover-inner {
        border: 1px solid red !important;
        .ant-popover-inner-content {
            padding: 0.3rem 0.6rem !important;
        }
    }
    .ant-popover-arrow {
        border-right-color: red !important;
        border-bottom-color: red !important;
    }

    //drawer 抽屉
    // .ant-drawer {
    //     padding-top: calc(3rem + 1px);
    // }

    //
    .b-red .ant-checkbox-disabled .ant-checkbox-inner {
        border-color: red !important;
    }

    // .form-control{
    //   height: calc(2rem - 2px) !important;
    // }

    //导航
    .breadcrumb_div {
        background-color: #e3e3e3;
    }

    /******************自定义 ANT_组件SM大小 */
    .ant-select-sm,
    .ant-input-sm,
    .ant-input-number,
    .ant-input-number-input {
        height: 28px !important;
    }
    .ant-select-sm .ant-select-selection__rendered {
        line-height: 26px !important;
    }
    .ant-select-sm .ant-select-selection--singl {
        height: 30px !important;
    }
    // .ant-select-selection--single{
    //   height:26px;
    // }
    .ant-select-selection__rendered {
        line-height: 26px !important;
    }

    form .ant-cascader-picker,
    form .ant-select {
        // width:85%;
        // margin-left:3%;
        border: none;
    }
    //a-tree样式
    .ant-tree li,
    .ant-tree-child-tree > li:first-child {
        padding-top: 0px !important ;
    }
    /*************************表单必填字段 */
    .required {
        margin-right: 4px;
        color: #f5222d;
        line-height: 1rem;
    }

    //分割线样式
    .ant-divider-horizontal.ant-divider-with-text-center::before,
    .ant-divider-horizontal.ant-divider-with-text-left::before,
    .ant-divider-horizontal.ant-divider-with-text-right::before,
    .ant-divider-horizontal.ant-divider-with-text-center::after,
    .ant-divider-horizontal.ant-divider-with-text-left::after,
    .ant-divider-horizontal.ant-divider-with-text-right::after {
        border-top: 1px solid #9b9b9b !important;
    }

    .other-info .form-group {
        flex-flow: row !important;
    }

    .form-control[readonly] {
        background-color: #fff !important;
    }
    //我的关注 样式
    .fa-flag-more {
        color: rgb(220, 53, 69);
        margin-right: 0.3rem;
    }
    .fa-flag-white {
        color: #fff;
        margin-right: 0.3rem;
        opacity: 0;
    }
    .nav-user-center {
        display: inline-block !important ;
    }
    .bg-white {
        background-color: white !important;
    }
    //必填项 *（星号） 样式
    .required-start {
        color: red;
        margin-right: 2px;
    }

    /** 自定义列表 样式--开始 */
    .mySet {
        .ant-checkbox-group-item {
            margin-bottom: 0.5rem !important;
            width: 110px !important;
        }
    }
    .crm-btn {
        margin-left: 0.5rem;
    }
    .my-bt .my_bt_group {
        // flex-grow: 1;
        text-align: end;
    }
    .fieldSet {
        cursor: pointer;
        float: right;
        margin-right: 10px;
        margin-top: 12px;
        font-size: 20px;
        color: #40a9ff;
        position: absolute;
        right: 1rem;
        z-index: 100;
    }
    /** 自定义列表 样式 --结束 */
    .ant-tabs-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        .content-wrapper {
            min-height: auto !important;
            height: auto !important;
            flex-grow: 1 !important;
            margin: 0px !important;
            .content-header {
                margin: 0 !important;
                padding: 0 !important;
            }
        }
    }

    /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * 2021年4月7日16:57:40
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    * gw
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    */
    .content-style-main {
        margin-left: 250px;
        transition: margin-left 0.3s ease-in-out;
        background: #fff;
        position: relative;
        z-index: 100;
    }
    .left-nav-bar-box {
        bottom: 0;
        width: 250px;
        float: none;
        height: 100vh;
        left: 0;
        position: fixed;
        transition: width 0.3s;
        top: 0;
        background-color: #343a40;
        .left-nav-bar {
            height: ceil(100vh - 160px);
            overflow-x: hidden;
            overflow-y: auto;
        }
        /* 设置滚动条的样式 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        /* 滚动槽 */
        ::-webkit-scrollbar-track {
            //   -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.4);
            //   -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
        }

        // ::-webkit-scrollbar-thumb:window-inactive {
        //     background: rgba(255, 0, 0, 0.3);
        // }
        .logo-warpper {
            position: relative;
            background: #fff;
            transition: all 0.3s;
            height: 46px;
            width: 250px;
            img {
                margin-left: 3.8rem;
                max-height: 3.75rem;
                vertical-align: middle;
                border-style: none;
            }
        }
        .logo-head {
            text-align: center;
            display: flex;
            flex-direction: column;
            font-size: 12px;
            color: #fff;
            border-bottom: 1px solid rgb(255, 255, 255, 0.5);
            margin: 0 6px;
            .item1 {
                height: auto;
                padding: 5px 0;
                .user-head {
                    width: 65px;
                    height: 65px;
                }
            }
            .item2 {
                display: flex;
                a {
                    font-size: 14px;
                    font-weight: bold;
                    color: #fff;
                }
                div {
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
    .msg-main-wrapper {
        top: 46px;
        height: calc(100% - 50px);
        .item-type {
            border-radius: 10px;
            font-size: 12px;
            padding: 2px 12px;
            position: relative;
            cursor: pointer;
            .red-point {
                position: absolute;
                width: 6px;
                height: 6px;
                background: red;
                border-radius: 50%;
                right: 0;
                top: -2px;
            }
        }
        .item-type-status-no {
            color: #40a9ff;
            background: rgb(213, 231, 255);
        }
        .item-type-status-yes {
            color: #fff;
            background: rgb(219, 224, 230);
        }
        .ant-list-item-meta {
            margin-bottom: 0px;
        }
        .ant-drawer-body {
            padding: 10px;
        }
        .msg-time {
            font-size: 12px;
            float: right;
            color: #bbb;
        }
        .ant-skeleton-content .ant-skeleton-title + .ant-skeleton-paragraph {
            margin-top: 20px;
        }
        .ant-skeleton-content .ant-skeleton-title {
            margin-top: 0px;
        }
        .ant-list-lg .ant-list-item {
            margin: 0px;
        }
        .demo-infinite-container {
            border-radius: 4px;
            overflow: auto;
            padding: 8px 24px;
            height: 100%;
        }
        .list-over {
            text-align: center;
            font-weight: bold;
            letter-spacing: 1px;
            color: #ccc;
        }
        .ant-drawer-body {
            padding: 0px;
            border: 0;
            height: calc(100% - 58px);
        }
    }
    .msg-header-wrapper {
        padding: 4px;
    }
    .navbar-expand .nav-top-menu {
        .msg-number-box {
            width: 45px;
            // height: 32px;
            position: relative;
            text-align: left;
            .msg-num {
                -webkit-text-size-adjust: none;
                font-size: 10px;
                transform: scale(0.8);
            }
        }
        .nav-link {
            padding-right: 0;
            padding-left: 0;
        }
    }

    .triangle-left {
        position: fixed;
        left: 230px;
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-right: 20px solid #fff;
        border-bottom: 16px solid transparent;
    }

    .children-box {
        position: fixed;
        left: 250px;
        z-index: 1099;
        background: #ffffff;
        height: auto;
        width: 995px;
        box-shadow: 2px 0px 5px #343a40;
        padding: 10px;
        box-sizing: border-box;
    }
    .three-menus {
        border: 1px solid rgba(52, 58, 64, 0.4);
        .ant-list-items {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            text-align: center;
        }
    }
    .three-menus-flex {
        flex: 0 0 195px;
    }
    .chil-title {
        font-weight: 700;
    }
    .chil-ul {
        font-weight: normal;
        list-style: none;
        padding-left: 10px;
        .chil-li {
            line-height: 32px;
            height: 32px;
            padding-left: 10px;
            text-align: left;
            cursor: pointer;
        }
        .chil-li:hover {
            background: rgba(52, 58, 64, 0.4);
            color: #ffffff;
        }
    }
</style>
